<template>
  <div class="demo-container">
    <h1>Loading 效果演示</h1>
    <n-button type="primary" @click="showLoading"> 显示Loading 三秒关闭</n-button>
    <!-- <n-button type="error" @click="hideLoading"> 隐藏Loading </n-button> -->
  </div>
</template>

<script setup lang="ts">
import { LoadingManager } from '@/utils/loadingManager'
import { NButton } from 'naive-ui'

const showLoading = () => {
  LoadingManager.getInstance().show()

  let timer = setTimeout(() => {
    LoadingManager.getInstance().hide()

    clearTimeout(timer)
  }, 3000)
}
</script>

<style scoped>
.demo-container {
  padding: 24px;
  text-align: center;
}

h1 {
  margin-bottom: 24px;
}

.n-button {
  margin: 0 8px;
}
</style>
